<!-- 系统日志 -->
<template>
    <div class="journal">
        <el-card class="!border-none" shadow="never">
            <el-form class="ls-form mb-[-16px]" :model="formData" inline>
                <el-form-item label="报表类型:">
                    <el-select class="w-[150px]" v-model="formData.type">
                        <el-option
                            v-for="item in typesRef"
                            :key="'type'+item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="时间范围:">
                    <el-button :type="formData.date=='day'?'primary':''" @click="changeDate('day')">日</el-button>
                    <el-button :type="formData.date=='month'?'primary':''" @click="changeDate('month')">月</el-button>
                    <el-button :type="formData.date=='year'?'primary':''" @click="changeDate('year')">年</el-button>
                </el-form-item>
                <el-form-item label="">
                    <el-date-picker
                        v-model="times"
                        :type="defaultDatePickerType"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :value-format="deformat"
                        :format="deformat"
                        clearable @change="changeTimes"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        
        <el-card class="!border-none mt-4" shadow="never">
            <el-row>
                <el-col :span="5">
                  <div>关键数据：{{typename}}</div>
                </el-col>
                <el-col :span="4">
                  <div>{{pager.countobj[0]}}：{{pager.countobj[1]}}</div>
                </el-col>
                <el-col :span="4">
                  <div>{{pager.svgobj[0]}}：{{pager.svgobj[1]}}</div>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="!border-none mt-4" shadow="never" v-loading="pager.loading">
          <el-row>
            <el-col :span="12">
              <v-charts
                  style="height: 300px;"
                  :option="workbenchData.line"
                  :autoresize="true"
              />
            </el-col>
            <el-col :span="12">
              <v-charts
                  style="height: 300px;"
                  :option="workbenchData.bar"
                  :autoresize="true"
              />
            </el-col>
          </el-row>
            <div>
                <el-table :data="pager.lists" size="large" style="width: 100%" height="500">
                    <el-table-column v-for="(value, key, index) in pager.table_columns" :fixed="index==0?'left':''"  :label="value" :prop="key" min-width="120" />
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="journal">
import vCharts from 'vue-echarts'
import { getSubmitAnalysis } from '@/api/report'
import { usePaging } from '@/hooks/usePaging'
import { GetDateStr } from '@/utils/util'
import {types} from './types'

const workbenchData = ref({
  line: {
      title: {
        left: 'center',
        text: ''
      },
      xAxis: {
          type: 'category',
          data: [0]
      },
      yAxis: {
          type: 'value'
      },
      tooltip: {
          trigger: 'axis'
      },
      series: [
          {
              name: '累计量',
              data: [0],
              type: 'line',
              smooth: true
          }
      ]
  },
  bar: {
      title: {
        left: 'center',
        text: ''
      },
      xAxis: {
          type: 'category',
          data: [0]
      },
      yAxis: {
          type: 'value'
      },
      tooltip: {
          trigger: 'axis'
      },
      series: [
          {
              name: '平均量',
              data: [0],
              type: 'bar',
              smooth: true
          }
      ]
  }
})

const typesRef = ref(types)

const typename = computed(() => {
  let arr = typesRef.value.filter((item)=>{
    return item.id==formData.value.type
  })
  return arr[0].name
})

// 默认查询昨天的
const yestoday = GetDateStr(-1);

interface formDataObj {
    type?: number // 类型
    date?: string // 时间类型
    start?: string // 时间
    end?: string // 时间
}


// 查询表单
const formData = ref<formDataObj>({
    type: 1,
    date: 'day',
    start: yestoday,
    end: yestoday,
})

// 时间插件确认
const times = ref([yestoday,yestoday])
function changeTimes(val:any){
  if(formData.value.date=='day'){
    formData.value.start = val[0]
    formData.value.end = val[1]
  }else{
    formData.value.start = val
    formData.value.end = ''
  }
}

// 时间类型切换
const defaultDatePickerType = ref('daterange')
const deformat = ref('YYYY-MM-DD')
function changeDate(val:any){
  formData.value.date = val
  if(val=='day'){
    deformat.value = 'YYYY-MM-DD'
    defaultDatePickerType.value = 'daterange'
    times.value = []
    formData.value.start = ''
    formData.value.end = ''
  }else if(val=='month'){
    deformat.value = 'YYYY-MM'
    defaultDatePickerType.value = 'month'
    times.value = []
    formData.value.start = ''
    formData.value.end = ''
  }else if(val=='year'){
    deformat.value = 'YYYY'
    defaultDatePickerType.value = 'year'
    times.value = []
    formData.value.start = ''
    formData.value.end = ''
  }
}

const { pager, getLists, resetPage } = usePaging({
    fetchFun: getSubmitAnalysis,
    params: formData.value
})


watch(pager, async (n) => {
  // 清空echarts 数据
  workbenchData.value.line.xAxis.data = []
  workbenchData.value.line.series[0].data = []
  workbenchData.value.bar.xAxis.data = []
  workbenchData.value.bar.series[0].data = []
  if(formData.value.type==1){
    workbenchData.value.line.title.text = '库存总量折线图'
    workbenchData.value.line.series[0].name = '库存总量'
    workbenchData.value.bar.title.text = '日进厂煤柱状图'
    workbenchData.value.bar.series[0].name = '日进厂量'
    n.lists.forEach((item)=>{
      workbenchData.value.line.xAxis.data.push(item.date)
      workbenchData.value.bar.xAxis.data.push(item.date)
      if(item.kczl==''){
        item.kczl = 0
      }
      workbenchData.value.line.series[0].data.push(item.kczl)
      if(item.jczl==''){
        item.jczl = 0
      }
      workbenchData.value.bar.series[0].data.push(item.jczl)
    })
  }else if(formData.value.type==2){
    workbenchData.value.line.title.text = '日耗量折线图'
    workbenchData.value.line.series[0].name = '日耗量'
    workbenchData.value.bar.title.text = '解冻库耗煤气柱状图'
    workbenchData.value.bar.series[0].name = '解冻库耗煤气量'
    n.lists.forEach((item)=>{
      workbenchData.value.line.xAxis.data.push(item.date)
      workbenchData.value.bar.xAxis.data.push(item.date)
      if(item.rhl==''){
        item.rhl = 0
      }
      workbenchData.value.line.series[0].data.push(item.rhl)
      if(item.jdkhmq==''){
        item.jdkhmq = 0
      }
      workbenchData.value.bar.series[0].data.push(item.jdkhmq)
    })
  }else if(formData.value.type==4){
    workbenchData.value.line.title.text = '实际炉数折线图'
    workbenchData.value.line.series[0].name = '实际炉数'
    workbenchData.value.bar.title.text = '回炉煤气量柱状图'
    workbenchData.value.bar.series[0].name = '回炉煤气量'
    n.lists.forEach((item)=>{
      workbenchData.value.line.xAxis.data.push(item.date)
      workbenchData.value.bar.xAxis.data.push(item.date)
      if(item.sjls==''){
        item.sjls = 0
      }
      workbenchData.value.line.series[0].data.push(item.sjls)
      if(item.hlmql==''){
        item.hlmql = 0
      }
      workbenchData.value.bar.series[0].data.push(item.hlmql)
    })
  }else if(formData.value.type==5){
    workbenchData.value.line.title.text = '干焦日产量折线图'
    workbenchData.value.line.series[0].name = '干焦日产量'
    workbenchData.value.bar.title.text = '污氮日耗量柱状图'
    workbenchData.value.bar.series[0].name = '污氮日耗量'
    n.lists.forEach((item)=>{
      workbenchData.value.line.xAxis.data.push(item.date)
      workbenchData.value.bar.xAxis.data.push(item.date)
      if(item.gjrcl==''){
        item.gjrcl = 0
      }
      workbenchData.value.line.series[0].data.push(item.gjrcl)
      if(item.wdrhl==''){
        item.wdrhl = 0
      }
      workbenchData.value.bar.series[0].data.push(item.wdrhl)
    })
  }else if(formData.value.type==6){
    workbenchData.value.line.title.text = '煤气产量折线图'
    workbenchData.value.line.series[0].name = '煤气产量'
    workbenchData.value.bar.title.text = '焦油产量柱状图'
    workbenchData.value.bar.series[0].name = '焦油产量'
    n.lists.forEach((item)=>{
      workbenchData.value.line.xAxis.data.push(item.date)
      workbenchData.value.bar.xAxis.data.push(item.date)
      if(item.meiqir==''){
        item.meiqir = 0
      }
      workbenchData.value.line.series[0].data.push(item.meiqir)
      if(item.jiaoyour==''){
        item.jiaoyour = 0
      }
      workbenchData.value.bar.series[0].data.push(item.jiaoyour)
    })
  }else if(formData.value.type==7){
    workbenchData.value.line.title.text = '蒸汽产量折线图'
    workbenchData.value.line.series[0].name = '蒸汽产量'
    workbenchData.value.bar.title.text = '日耗煤量柱状图'
    workbenchData.value.bar.series[0].name = '日耗煤量'
    n.lists.forEach((item)=>{
      workbenchData.value.line.xAxis.data.push(item.date)
      workbenchData.value.bar.xAxis.data.push(item.date)
      if(item.rzqcl==''){
        item.rzqcl = 0
      }
      workbenchData.value.line.series[0].data.push(item.rzqcl)
      if(item.rhml==''){
        item.rhml = 0
      }
      workbenchData.value.bar.series[0].data.push(item.rhml)
    })
  }else if(formData.value.type==8){
    workbenchData.value.line.title.text = '甲醇日产量折线图'
    workbenchData.value.line.series[0].name = '甲醇日产量'
    workbenchData.value.bar.title.text = '日耗煤气量柱状图'
    workbenchData.value.bar.series[0].name = '日耗煤气量'
    n.lists.forEach((item)=>{
      workbenchData.value.line.xAxis.data.push(item.date)
      workbenchData.value.bar.xAxis.data.push(item.date)
      if(item.jcr==''){
        item.jcr = 0
      }
      workbenchData.value.line.series[0].data.push(item.jcr)
      if(item.hmr==''){
        item.hmr = 0
      }
      workbenchData.value.bar.series[0].data.push(item.hmr)
    })
  }else if(formData.value.type==9){
    workbenchData.value.line.title.text = '粗苯日加工量折线图'
    workbenchData.value.line.series[0].name = '粗苯日加工量'
    workbenchData.value.bar.title.text = '纯苯日产生量柱状图'
    workbenchData.value.bar.series[0].name = '纯苯日产生量'
    n.lists.forEach((item)=>{
      workbenchData.value.line.xAxis.data.push(item.date)
      workbenchData.value.bar.xAxis.data.push(item.date)
      if(item.cbjglr==''){
        item.cbjglr = 0
      }
      workbenchData.value.line.series[0].data.push(item.cbjglr)
      if(item.cbsclr==''){
        item.cbsclr = 0
      }
      workbenchData.value.bar.series[0].data.push(item.cbsclr)
    })
  }
  
},{ deep: true })


onMounted(() => {
    getLists()
})


</script>

<style lang="scss" scoped></style>
